<template>
  <div id="info">
    <p></p>
    <div class="mem_tit">添加资讯</div>
    <form @submit.prevent="addNews">
      <div class="form-group">
        <label for="newsTitle">添加标题</label>
        <input
          type="text"
          id="newsTitle"
          v-model="newsTitle"
          @blur="toCheckTitle"
        />
        <span class="error-message" :style="titleStyle">{{ checkTitle }}</span>
      </div>
      <div class="form-group">
        <label for="content">添加正文</label>
        <textarea id="content" v-model="content" @blur="toCheckText"></textarea>
        <span class="error-message" :style="textStyle">{{ checkText }}</span>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
function checkNull(val) {
  return val == null || val === "" || val.includes(" ");
}

export default {
  el: "#info",
  data() {
    return {
      newsTitle: "",
      content: "",
      checkTitle: "",
      checkText: "",
      titleStyle: { color: "red" },
      textStyle: { color: "red" },
    };
  },
  methods: {
    toCheckTitle() {
      if (checkNull(this.newsTitle)) {
        this.checkTitle = "请输入标题";
        return false;
      }
      this.$axios({
        method: "post",
        url: "/api/news/checkTitle",
        data: {
          title: this.newsTitle,
        },
      })
        .then((rs) => {
          if (rs.data.result === "exist") {
            this.checkTitle = "标题已经存在，请重新输入";
          } else {
            this.checkTitle = "标题输入正确";
            this.titleStyle.color = "green";
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    toCheckText() {
      if (checkNull(this.content)) {
        this.checkText = "请输入正文";
        return false;
      }
      this.checkText = "正文输入正确";
      this.textStyle.color = "green";
    },
    addNews() {
      if (this.titleStyle.color != "green" || this.textStyle.color != "green") {
        this.toCheckTitle();
        this.toCheckText();
        return false;
      }
      this.$axios({
        method: "post",
        url: "/api/news/addNews",
        data: {
          title: this.newsTitle,
          content: this.content,
        },
      })
        .then((rs) => {
          alert(rs.data.result);
          if (rs.data.result === "添加成功") {
            this.newsTitle = "";
            this.content = "";
            this.checkTitle = "";
            this.checkText = "";
            this.titleStyle.color = "red";
            this.textStyle.color = "red";
            this.$router.push("/managerIndex/managerNews");
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
.mem_tit {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="text"]:focus,
textarea:focus {
  border-color: #66afe9;
  outline: none;
}

.error-message {
  color: red;
  font-size: 12px;
}

button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #4caf50;
}
</style>
